<template>
  <div class="scanCode">
    <nut-form ref="ruleForm" :model-value="formData" :rules="rules">
      <nut-form-item label="类型选择">
        <nut-input v-model="formData.station" class="nut-input-text" readonly placeholder="请选择类型" type="text" @click="show = true" />
        <nut-popup v-model:visible="show" position="bottom">
          <nut-picker :columns="columns" title="请选择类型" @confirm="confirm" @cancel="show = false"> </nut-picker>
        </nut-popup>
      </nut-form-item>

      <nut-form-item label="车架码">
        <nut-input v-model="formData.frameCode" class="nut-input-text" placeholder="请扫描车架码" type="text" />
      </nut-form-item>
      <template v-for="(value, index) in submitList" :key="index">
        <nut-form-item :label="value.label">
          <nut-input v-model="value.value" class="nut-input-text" :placeholder="'请扫描' + value.label" type="text" />
        </nut-form-item>
      </template>
    </nut-form>

    <nut-button size="large" type="primary" @click="dataUp">确认提交</nut-button>

    <!-- <div v-if="electricEnergy.includes(formData.station)" class="scanCode-bnoxa">
      <div class="scanCode-bnoxa-pxzxz">
        <div><nut-button plain type="primary" size="mini" @click="formData.process = 0">切换控制器码</nut-button></div>
        <div><nut-button plain type="primary" size="mini" @click="formData.process = 1">切换电池码</nut-button></div>
        <div><nut-button plain type="primary" size="mini" @click="formData.process = 2">切换电机码</nut-button></div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importFunction from './scanCode';
export default {
  setup() {
    const { base, columns, confirm, dataUp, init } = importFunction();
    init();
    return {
      ...toRefs(base),
      columns,
      confirm,
      dataUp,
    };
  },
};
</script>

<style lang="less" scoped>
.scanCode {
  &-bnoxa {
    position: fixed;
    bottom: 120px;
    width: 100%;
    &-pxzxz {
      display: flex;
      justify-content: space-around;
      justify-items: center;
    }
  }
}
</style>
